<template>
  <div id="reportWorkSearchList">
    <Breadcrumb content="工作统计" />
    <div class="bodyContent">
      <Splitpanes>
        <!-- 查询条件 -->
        <Pane size="17">
          <el-scrollbar style="height: 100%">
            <vxe-form ref="searchConForm" :data="form" title-width="90" class-name="padding-xs width-100-percentage">
              <vxe-form-item title="检验日期[起]" class-name="width-100-percentage">
                <template #default="{ data }">
                  <el-date-picker v-model="data.sampledaBegin" :value-format="'YYYY-MM-DD HH:mm:ss'" type="datetime"
                    placeholder="检验日期[起]" :shortcuts="shortcuts" style="width: 100%" />
                </template>
              </vxe-form-item>
              <vxe-form-item title="检验日期[止]" class-name="width-100-percentage">
                <template #default="{ data }">
                  <el-date-picker v-model="data.sampledaEnd" :value-format="'YYYY-MM-DD HH:mm:ss'" type="datetime"
                    placeholder="检验日期[止]" :shortcuts="shortcuts" style="width: 100%" />
                </template>
              </vxe-form-item>
              <vxe-form-item title="审核日期[起]" class-name="width-100-percentage">
                <template #default="{ data }">
                  <el-date-picker v-model="data.chkdaBegin" :value-format="'YYYY-MM-DD HH:mm:ss'" type="datetime"
                    placeholder="审核日期[起]" :shortcuts="shortcuts" style="width: 100%" />
                </template>
              </vxe-form-item>
              <vxe-form-item title="审核日期[止]" class-name="width-100-percentage">
                <template #default="{ data }">
                  <el-date-picker v-model="data.chkdaEnd" :value-format="'YYYY-MM-DD HH:mm:ss'" type="datetime"
                    placeholder="审核日期[止]" :shortcuts="shortcuts" style="width: 100%" />
                </template>
              </vxe-form-item>
              <vxe-form-item title="" class-name="width-100-percentage">
                <template #title>
                  <vxe-radio-group v-model="form.radio" class="margin-top cu-list" @change="getWklt">
                    <div class="cu-item readio-item">
                      <vxe-radio label="1">申请项目</vxe-radio><br />
                    </div>
                    <div class="cu-item readio-item">
                      <vxe-radio label="2">报告项目</vxe-radio><br />
                    </div>
                  </vxe-radio-group>
                </template>
              </vxe-form-item>

              <vxe-form-item title-width="0" class-name="width-100-percentage">
                <template #title></template>
                <template #default>
                  <div class="width-100-percentage flex justify-center">
                    <vxe-button type="text" content="重置条件" class="button-blue" @click="resetForm"></vxe-button>
                    <vxe-button type="text" content="查询数据" class="button-blue" @click="getWklt"
                      icon="el-icon-search"></vxe-button>
                  </div>
                </template>
              </vxe-form-item>
            </vxe-form>
          </el-scrollbar>
        </Pane>
        <Pane size="83">
          <Splitpanes>
            <Pane size="50">
              <vxe-table :loading="tableLoading" border align="left" show-overflow ref="wLTable" class="mytable-scrollbar"
                height="95%" :data="mainInfoList" :keyboard-config="{ isArrow: true }" :sort-config="{ trigger: 'cell' }"
                :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" 
                :scroll-y="{ enabled: true }" @current-change="handleRowClick">
                <vxe-column type="seq" title="#" width="30"></vxe-column>
                <vxe-column field="rptgroup" title="报告单元" show-overflow></vxe-column>
                <vxe-column field="specimencount" title="样本数" show-overflow></vxe-column>
                <vxe-column field="totalprice" title="总价" show-overflow></vxe-column>
              </vxe-table>
            </Pane>
            <Pane size="50">
              <div style="height: 100%" v-if="form.radio === '1'">
                <!-- 申请项目 -->
                <vxe-table ref="wLTableResult" :border="'inner'" :scroll-y="{ enabled: true, gt: 100 }"
                  class="border-top solid mytable-scrollbar" v-loading="Wloading" resizable show-overflow
                  :mouse-config="{ selected: !currentWork.isFirstReviewed }" height="95%" :data="wLResults"
                  :row-config="{ isArrow: true, isEnter: true, isCurrent: true }" :keyboard-config="{ isArrow: true }"
                  :tooltip-config="{ showAll: true, enterable: true }">
                  <vxe-column type="seq" width="24"></vxe-column>
                  <vxe-column field="rptGroup" title="报告单元"></vxe-column>
                  <vxe-column field="feeName" title="申请项目"></vxe-column>
                  <vxe-column field="resultCount" title="数量"></vxe-column>
                </vxe-table>
              </div>
              <div style="height: 100%" v-if="form.radio === '2'">
                <!-- 报告项目 -->
                <vxe-table ref="wLResultRef" :border="'inner'" :scroll-y="{ enabled: true, gt: 100 }"
                  class="border-top solid mytable-scrollbar" v-loading="Wloading" resizable show-overflow
                  :mouse-config="{ selected: !currentWork.isFirstReviewed }" height="95%" :data="wLResultList"
                  :row-config="{ isArrow: true, isEnter: true, isCurrent: true }" :keyboard-config="{ isArrow: true }"
                  :tooltip-config="{ showAll: true, enterable: true }">
                  <vxe-column type="seq" width="24"></vxe-column>
                  <vxe-column field="rptGroup" title="报告单元"></vxe-column>
                  <vxe-column field="itemNa" title="报告项目"></vxe-column>
                  <vxe-column field="resultCount" title="数量"></vxe-column>
                </vxe-table>
              </div>
            </Pane>
          </Splitpanes>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
import GoBack from '@/components/GoBack.vue'; //返回组件
import { reactive, ref, getCurrentInstance, onMounted, watch } from 'vue';
import { IsEmpty, formatDateTime, sortByField } from '@/utils/common';
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import VXETable from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import VxePulldownSelection from '@/components/VxePulldownSelection.vue';
import * as XLSX from 'xlsx';
import SelectWorkGroup from '../lab_bus/components/SelectWorkGroup.vue'; //报告单元引入下拉组件
import SelectWorkGroupAllDefaultAll from '../lab_bus/components/SelectWorkGroupAllDefaultAll.vue'; //报告单元默认全部引入下拉组件
import OrgResultComp from '../lab_bus/components/OrgResultComp.vue'; //
import SelectDataList from '@/components/SelectDataList.vue';
import MultiRptPreview from '@/components/MultiRptPreview.vue';
import { AppStore } from '@/stores/store';
import QuietPrint from '@/components/QuietPrint.vue';
import VxeDictSelection from '@/components/VxeDictSelection.vue';
import VxePulldownSelectionWithNa from '@/components/VxePulldownSelectionWithNa.vue';
import VxePulldownMultiSelection from '@/components/VxePulldownMultiSelection.vue';
import { getOptionValueByCodeGlobalOption, getOptionValueByCodeRptGroupOption } from '@/utils/SysOptionsHelper';
import axios from 'axios';

let selectWorkGroupRef = ref(null);
let store = AppStore();
let { proxy }: any = getCurrentInstance();
let Wloading = ref(false);
let tableLoading = ref(false);
let wLResults = reactive([]); //工作列表结果
let wLResultList = reactive([]); //工作列表结果
let Resultloading = ref(false);
const Axios = axios.create();
let mainInfoList = reactive([]); //报告单元列表数据
const wLTable = ref(null); /**报告单表格对象 */

const shortcuts = [
  {
    text: '今天',
    value: new Date()
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date();
      date.setDate(date.getDate() - 1);
      return date;
    }
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date();
      date.setDate(date.getDate() - 7);
      return date;
    }
  }
];
//#region  自定义指令
// 自定义指令
const enterNextInput: ObjectDirective<HTMLElement> = {
  mounted(el) {
    el.addEventListener('keypress', (e) => {
      let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
      if (charcode == 13) {
        const doms: any = document.getElementsByClassName('enterNextInputFlag');
        let list = [];
        for (let i = 0; i < doms.length; i++) {
          let node = doms[i].childNodes;
          if (node.length > 0) {
            node.forEach((v) => {
              if ((v.nodeName == 'TEXTAREA' || v.nodeName == 'INPUT') && !v.disabled) {
                list.push(v);
              }
            });
          }
        }
        for (let j = 0; j <= list.length; j++) {
          if (list[j] == document.activeElement) {
            if (j == list.length - 1) {
              return;
            }
            list[j + 1].focus();
            return;
          }
        }
      }
    });
  }
};

// 使用自定义指令
proxy.$.directives = { enterNextInput: enterNextInput };

let form = reactive({
  sampledaBegin: null,
  sampledaEnd: null,
  chkdaBegin: null,
  chkdaEnd: null,
  radio: '2',
  rptGroup:null
});
let reportDay = ref(0);
let currentWork = reactive({}) as any;


// 页面加载时字典
onMounted(() => {
  reportDay.value = getOptionValueByCodeGlobalOption('bgcxmrrqfw') ? getOptionValueByCodeGlobalOption('bgcxmrrqfw') : 0;
  form.sampledaBegin = formatDateTime(new Date().valueOf() - reportDay.value * 24 * 60 * 60 * 1000, 'yyyy-MM-dd 00:00:00');
  form.sampledaEnd = formatDateTime(new Date().valueOf(), 'yyyy-MM-dd 23:59:59');
});

// 获取报告单列表
function getWklt() {
  mainInfoList.length = 0;
  wLResults.length = 0;
  tableLoading.value = true;
  Wloading.value = true;
  const url = '/lab/maininfo/workSearchMaininfoList';
  let data: any = Object.assign({}, form);
  proxy.$http
    .post(url, data)
    .then((res: any) => {
      mainInfoList.length = 0;
      if (res.data.length > 0) {
        // mainInfoList.length = 0;
        proxy.$nextTick(() => {
          mainInfoList.push(...res.data);
          handleRowClick({ row: res.data[0] });
        });
      }
      Wloading.value = false;
      tableLoading.value = false;
    })
    .catch((err) => {
      Wloading.value = false;
      tableLoading.value = false;
      VxeMessage(err, VxeNotifyType.error);
    });
}

//rowClick
function handleRowClick({ row }) {  
  form.rptGroup = row.rptgroup;
  wLResults.length = 0;
  wLResultList.length = 0;
  Wloading.value = true;
  (proxy.$refs.wLTable as any).setCurrentRow(row);
  let url = '/lab/maininfo/workSearchResultList';
  //申请项目
  let data: any = Object.assign({}, form);
  proxy.$http
    .post(url, data)
    .then((res: any) => {
      if (res.data.length > 0) {
        // mainInfoList.length = 0;
        proxy.$nextTick(() => {
          if (form.radio == '1') {
            wLResults.push(...res.data);
          }
          else {
            wLResultList.push(...res.data);
          }
        });
      }
      Wloading.value = false;
    })
    .catch((err) => {
      Wloading.value = false;
      VxeMessage(err, VxeNotifyType.error);
    });
}


function resetForm() {
  form.sampledaBegin = formatDateTime(new Date().valueOf() - reportDay.value * 24 * 60 * 60 * 1000, 'yyyy-MM-dd 00:00:00');
  form.sampledaEnd = formatDateTime(new Date().valueOf(), 'yyyy-MM-dd 23:59:59');
  form.chkdaBegin = null;
  form.chkdaEnd = null;
  form.radio = '2';
}



</script>
<style lang="scss" scoped>
#reportWorkSearchList {
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);

    :deep(.el-tabs__header) {
      margin: 0 !important;
    }

    :deep(.el-tabs) {
      height: 100%;

      .el-tabs__content {
        height: calc(100% - 41px);
      }
    }
  }

  .splitpanes {
    background-color: $base-white;
    height: 100%;
  }

  :deep(.splitpanes__pane) {
    overflow: visible;
  }

  :deep(.el-table) {

    th,
    .cell {
      padding: 2px 0;
      font-size: 14px;
    }

    td {
      padding: 0;
    }

    .cell.el-tooltip {
      min-width: 0;
      padding: 0 2px;

      // 急诊
      .el-icon-first-aid-kit {
        color: $danger-color;
      }

      // 打印
      .el-icon-printer {
        color: $warning-color;
      }

      // 审核
      .el-icon-coordinate {
        color: $brand-color;
      }

      // 完成
      .el-icon-circle-check {
        color: $success-color;
      }

      // 危急
      .el-icon-warning {
        color: $danger-color;
      }
    }

    .table-icon .cell.el-tooltip {
      padding: 0;

      i {
        font-size: 12px;
        font-weight: 700;
      }
    }

    .ultra-small-font {
      font-weight: 500;
      font-size: 12px;
      line-height: 12px;
      transform: scale(0.9);
    }
  }

  :deep(.vxe-cell) {
    padding-left: 5px;
  }

  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 0 5px 0 0;
  }
}
</style>
